
<template>
  <div class="my_div">
    <img :src="dogImgUrl" alt="">
    <!-- <p>{{dogName}}</p > -->
    <button @click="fn">{{dogName}}</button>
  </div>
</template>
<script>
export default {
  props: ["dogImgUrl", "dogName"],
  data() {
    return {};
  },
  methods: {
    fn() {
      this.$emit("likedog", this.dogName);
    }
  }
};
</script>

<style scoped>
li {
   list-style: none;
}
.my_div {
   width: 200px;
   border: 1px solid black;
   text-align: center;
   float: left;
}

.my_div img {
   width: 100%;
   height: 200px;
}
</style>